<template>
  <tm-app>
    <view class="modal">
      <view class="content">
        <view class="content-title">
          <view class="content-title-img">
            <img class="imgUser" :src="userInfo?.share.avatar?.thumbnail" />
          </view>
        </view>
        <view class="content-item">
          <span class="content-item-name">昵称：</span>
          <view>{{ userInfo?.name }}</view>
        </view>
        <tm-divider />
        <view class="content-item">
          <span class="content-item-name">姓名：</span>
          <view>{{ userInfo?.name }}</view>
        </view>
        <tm-divider />
        <view class="content-item">
          <span class="content-item-name">账户：</span>
          <view>{{ userInfo?.code }}</view>
        </view>
        <tm-divider />
        <view class="content-item">
          <span class="content-item-name">联系方式：</span>
          <view>{{ userInfo?.code }}</view>
        </view>
        <!-- #ifdef H5 -->
        <tm-divider />
        <view
          class="content-item"
          :style="{
            display: 'flex',
            alignItems: 'center',
            alignContent: 'space-between'
          }"
        >
          <span class="content-item-name">解除与浙政钉的关联：</span>
          <view>
            <tm-button
              transprent
              :shadow="0"
              size="small"
              label="解除"
              outlined
              @click="openModal"
            >
            </tm-button>
          </view>
        </view>
        <!-- #endif -->
        <tm-divider />
        <view class="content-remark">
          <span class="content-remark-title">座右铭：</span>
          <view class="content-remark-text">{{ userInfo?.remark }}</view>
        </view>
      </view>
    </view>
    <!-- #ifdef H5 -->
    <tm-modal
      ref="calendarView"
      title="确认提示"
      :height="300"
      :border="0"
      class="showModal"
      text
      linear="bottom"
      v-model:show="showPopup"
      @ok="relieveBind"
      ok-text="确定"
    >
      确定解除本浙里资产账号与浙政钉的关联？
    </tm-modal>
    <!-- #endif -->
  </tm-app>
</template>

<script lang="ts" setup>
import orgCtrl from '@/ts/controller'
import { ref } from 'vue'

const userInfo = ref(orgCtrl.user)
// #ifdef H5
const showPopup = ref(false)

const openModal = () => {
  showPopup.value = true
}

const relieveBind = () => {
  const token = uni.getStorageSync('accessToken')
  uni.request({
    url: 'http://zydd.orginone.org.cn/ZZDLogin.unbind',
    method: 'POST',
    header: {
      'Content-Type': 'application/json'
    },
    data: {
      accessToken: token
    },
    success: res => {
      uni.showToast({
        title: JSON.stringify(res.data.data),
        icon: 'none',
        duration: 3000
      })
    },
    fail: _err => {}
  })
}
// #endif
</script>

<style lang="scss" scoped>
.modal {
  /*  #ifdef H5  */
  position: fixed;
  width: 80vw;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  z-index: 9;
  /*  #endif  */
  background-color: #fff;
  padding: 20upx;
  border-radius: 20upx;
  box-shadow: 0 4upx 16upx rgba(0, 0, 0, 0.15);
  /*  #ifndef H5  */
  z-index: 1000; /* 设置在蒙层之上 */
  /*  #endif  */
  .content {
    .content-title {
      width: 100%;
      height: 360upx;
      display: flex;
      align-items: center;
      justify-content: center;
      .content-title-img {
        // width: 50%;
        .imgUser {
          height: 200upx;
          width: 200upx;
          border-radius: 50%;
          border: 2upx solid #d3d3d3;
        }
      }
      .content-title-type {
        width: 50%;
        display: flex;
        .content-name {
          color: #8d8d8d;
        }
      }
    }
    .content-item {
      width: 100%;
      height: 60upx;
      display: flex;
      align-items: center;
      .content-item-name {
        color: #8d8d8d;
      }
    }
    .content-remark {
      display: flex;
      .content-remark-title {
        color: #8d8d8d;
      }
      .content-remark-text {
        height: 120upx;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        /* 控制显示行数 */
        -webkit-line-clamp: 3;
        flex: 1;
      }
    }
  }
  .close {
    position: absolute;
    bottom: 0upx;
    left: 0upx;
    width: 100%;
    height: 80upx;
    border-top: 2upx solid #d3d3d3;
    box-sizing: border-box;
    margin-top: 20upx;
    font-size: 35upx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .close-cancel {
      color: #000;
      width: 50%;
      border-right: 2upx solid #d3d3d3;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .close-confirm {
      color: #007aff;
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
